<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-10-31 10:43:44
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-01-31 14:46:07
 * @FilePath: \vue-admin-template\src\views\projectManagement\reviewSheet\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="distribution">
        <el-dialog title="" :visible.sync="showDetailPage" width="1200px" :before-close="handleClose">
            <div style="text-align: center;">
                <span style="font-size: 20px;color: #3F3F3F;">{{ '详情' }}</span>
            </div>
            <div style="padding: 20px;">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="title-box-name" style="margin-bottom:20px;color: #5CD8DA;font-weight: 600;">出库单</div>
                    <div style="display: flex;align-items: center;color: #5CD8DA;">
                        <div style="margin-right: 25px;"><img style="vertical-align: bottom;margin-right: 5px;"
                                src="@/assets/icon/入库管理-入库单号.png" alt=""><span>出库单号：{{ item.no }}</span></div>
                        <div style="margin-right: 25px;"><img style="vertical-align: bottom;margin-right: 5px;"
                                src="@/assets/icon/入库管理-入库时间.png" alt=""><span>出库时间：{{ item.invDate }}</span></div>
                        <div style="margin-right: 25px;"><img style="vertical-align: bottom;margin-right: 5px;"
                                src="@/assets/icon/出库管理-领用部门.png" alt=""><span>领用部门：{{ item.useDepartment }}</span></div>
                        <div style="margin-right: 25px;"><img style="vertical-align: bottom;margin-right: 5px;"
                                src="@/assets/icon/出库管理-领用人.png" alt=""><span>领用人：{{ item.recipient }}</span></div>
                    </div>
                </div>
                <section>
                    <el-table ref="tableMain" :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="tableData" style="width: 100%" height="300">
                        <el-table-column type="index" label="序号" width="50"></el-table-column>
                        <el-table-column prop="type" label="类别"></el-table-column>
                        <el-table-column prop="code" label="编号"></el-table-column>
                        <el-table-column prop="name" label="名称"></el-table-column>
                        <el-table-column prop="norm" label="规格"></el-table-column>
                        <el-table-column prop="unit" label="单位"></el-table-column>
                        <el-table-column prop="manufacturer" label="厂家"></el-table-column>
                        <el-table-column prop="num" label="出库数量"></el-table-column>
                        <el-table-column prop="remark" label="备注"></el-table-column>
                    </el-table>
                </section>
            </div>

        </el-dialog>
    </div>
</template>
  
<script>
export default {
    props: {
        showDetailPage: {
            type: Boolean
        },
        item: {
            type: [Object,String]
        },
    },
    data() {
        return {
            tableData: [],
           
        }
    },
    mounted() {
        this.$baseRequest('/spar/stock-record/getList/' + this.item.no, {}, {}, 'get').then(res => {
            this.tableData = res.data;
        })
    },
    methods: {
        addItem() {
            this.form.list.push({
                name: ''
            })
        },
        deleteItem(index) {
            this.form.list.splice(index, 1)
        },
        handleClose(done) {
            this.$emit('closeDetailPage')
        },
        save() {
            this.$emit('closeDetailPage', 'isFresh')
            // this.$baseRequest('/item/review/procurementReviewOverrule', this.form, {}, 'post').then(res => {
            //     this.$message.success('驳回成功');
            //     this.$emit('closeDetail', 'isFresh')
            // })

        }
    }
}
</script>
<style>
.distribution .el-dialog__body {
    padding-top: 15px;
}
</style>
<style lang="scss" scoped>
.title-box-name {
    position: relative;
    margin-left: 10px;
    font-size: 18px;
}

.title-box-name::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 0px;
    width: 4px;
    height: 19px;
    border-radius: 2px;
    background-color: #5CD8DA;

}
</style>
  